<template>
  <div class="filter-box">
    <el-form ref="filterForm" :model="filterForm" label-width="auto" label-position="top">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="展商所属地">
            <el-select v-model="value" placeholder="请选择" size="large" style="width: 100%;">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="服务品牌">
            <el-select v-model="value" placeholder="请选择" size="large" style="width: 100%;">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="展商状态">
            <el-select v-model="value" placeholder="请选择" size="large" style="width: 100%;">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="多文件格式上传">
            <el-select v-model="value" placeholder="请选择" size="large" style="width: 100%;">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="展商关键词">
            <el-select v-model="value" placeholder="请选择" size="large" style="width: 100%;">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="展商来源">
            <el-select v-model="value" placeholder="请选择" size="large" style="width: 100%;">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="form-footer">
        <el-button plain size="large" type="danger" :icon="Refresh">重置</el-button>
        <el-button size="large" type="danger">筛选</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import {defineComponent, ref} from "vue";
import { Refresh } from '@element-plus/icons-vue'

// const searchValue = ref('')
const filterForm = ref({})
const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

defineComponent({name: 'FilterComp'})
</script>

<style scoped lang="scss">
.filter-box {
  width: 100%;
  margin-top: 24px;
  padding: 0 34px;

  .form-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
